<script setup>
import { ref, watchEffect } from "vue";
import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons-vue";
import moment from "moment";
// emits: [];
const emit = defineEmits(["toggleCollapsed"]);
const props = defineProps({
  collapsed: Boolean,
});
let aa = ref(moment(Date.now()).format("YYYY-DD-MM HH:mm:ss"));
setInterval(() => {
  aa.value = moment(Date.now()).format("YYYY-DD-MM HH:mm:ss");
}, 1000);

let collapsed = ref(props.collapsed);
watchEffect(() => {
  collapsed.value = props.collapsed;
});
</script>

<template>
  <a-button
    type="text"
    @click="emit('toggleCollapsed')"
    style="font-size: 22px"
  >
    <!-- <MenuUnfoldOutlined v-if="collapsed" />
    <menu-fold-outlined v-else /> -->
    <component
      :is="collapsed ? MenuUnfoldOutlined : MenuFoldOutlined"
    ></component>
  </a-button>
  <div class="time">
    <span>{{ aa }}</span>
  </div>
</template>

<style lang="less" scoped>
.time {
  width: 30%;
  float: right;
}
</style>
